<script setup lang="ts">
import {ref} from "vue";
import {Goods, PageGoodsReqVO} from "@/interfaces/goods";
import {usePageGoodsApi} from "@/services/api";
import {useStore} from "vuex";
import {onShow} from "@dcloudio/uni-app";

const goodsList = ref<Goods[]>([])
const store = useStore()
const goodsId = ref<number>(0)
const show = ref<boolean>(false)
const statusList = ref<string[]>(['', '已上架', '已下架', '库存不足'])
const list = ref([
  {
    name: '修改',
    handle: (goods: Goods) => {
      uni.$u.route({
        url: '/pages/release/release',
        params: {
          data: JSON.stringify(goods)
        }
      })
    },
  }
])
const handle = (goods: Goods) => {
  goodsId.value = goods.id
  show.value = true
}
const onSelect = (e: any) => {
  e.handle(goodsList.value.filter(value => value.id === goodsId.value)[0])
}
const pageGoodsReq = ref<PageGoodsReqVO>({
  current: 1,
  size: 10,
  userId: ""
})
const init = async () => {
  pageGoodsReq.value.userId = store.getters["auth/getUserId"]
  const {data: res} = await usePageGoodsApi(pageGoodsReq.value)
  goodsList.value = res.list || []
}
onShow(() => {
  init()
})
</script>

<template>
  <view class="container">
    <view
        v-for="(goods,index) in goodsList"
        :key="index"
        class="goods"
    >
      <view class="goods-image" @tap="handle(goods)">
        <up-image :show-loading="true" :src="goods.images.split(';')[0]" height="120px" width="120px"></up-image>
      </view>
      <view class="goods-info" @tap="handle(goods)">
        <view class="goods-name">
          <up-text :text="goods.name" lines="2" size="30"></up-text>
        </view>
        <view class="goods-price">
          ￥{{ goods.price }}
        </view>
      </view>
      <view v-if="goods.stock>0" class="status">
        {{ statusList[goods.status] }}
      </view>
      <view v-else class="status">
        {{ statusList[3] }}
      </view>
    </view>
    <u-action-sheet
        :actions="list"
        :closeOnClickAction="true"
        :closeOnClickOverlay="true"
        :show="show"
        title="操作"
        @close="show = false"
        @select="onSelect"></u-action-sheet>
  </view>
</template>

<style scoped lang="scss">
.container {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: #edf2fd;
  gap: 12px;

  .goods {
    display: flex;
    flex-direction: row;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 12px;
    gap: 12px;
    position: relative;

    .goods-image {
      flex: 2;

    }

    .goods-info {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-price {
        color: #dd524d;
        font-size: 24px;
      }
    }

    .status {
      position: absolute;
      bottom: 12px;
      right: 12px;
    }
  }
}
</style>